/**
 * Created by lizhe on 2018/4/17.
 */
var x=0;
var croppable = false;
$(document).ready(function(){

    var $image = $('#image');
    $image.cropper({
        aspectRatio: 1,
        viewMode: 1,
        guides:true,
        ready: function () {
            croppable = true;
        }
    });

    $("#AddLink").click(function(){
        var imgId = "img-"+x;
        var imgInputId = "imgInput-"+x;
        var titleId = "title-"+x;
        var urlId = "url-"+x;
        var priorityId = "priority-" + x;
        var id = 'id-'+x;
        var iconId = 'imgurl-'+x;
        document.getElementById("content").innerHTML = document.getElementById("content").innerHTML +
            '<div class="divContent">'+
            '<span class="hidden" id="'+id+'"></span>'+
            '<span id='+iconId+' class="hidden">images/link.png</span>'+
            '<div class="divList">'+
            '<img src="images/link.png" class="img" id="'+imgId+'" onclick=imageClick("'+imgInputId+'")>'+
            '<input type="file" id="'+imgInputId+'" class="hidden" onchange=changeimage(this,"image")>'+
            '</div>'+
            '<div style="margin-top: 10px">'+
            '<div class="col-sm-2 control-label" style="padding-top: 4px">标题</div>'+
            '<div class="col-sm-10">'+
            '<input type="text" placeholder="标题" class="inputText" id="'+titleId+'">'+
            '</div>'+
            '</div>'+
            '<div style="margin-top: 50px">'+
            '<div class="col-sm-2 control-label" style="padding-top: 4px">链接</div>'+
            '<div class="col-sm-10">'+
            '<input type="text" placeholder="链接" class="inputText" id="'+urlId+'">'+
            '</div>'+
            '</div>'+
            '<div style="margin-top: 90px">'+
            '<div class="col-sm-2 control-label" style="padding-top: 4px">排序</div>'+
            '<div class="col-sm-10">'+
            '<input type="number" value="0" class="inputText" id="'+priorityId+'">'+
            '</div>'+
            '</div>'+
            '<div>'+
            '<div class="col-sm-12">'+
            '<a class="btn btn-primary button" onclick="saveLink('+x+')">'+
            '<i class="fa fa-save"></i>'+
            '&nbsp;保存'+
            '</a>'+
            '<a class="btn btn-danger button" onclick="delLink('+x+')">'+
            '<i class="fa fa-trash-o"></i>'+
            '&nbsp;删除'+
            '</a>'+
            '</div>'+
            '</div>'+
            '</div>'
    });

    queryLink();
});

function queryLink(){
    $.ajax({
        url : urladdr + "/web/link/list",
        method : "POST",
        data : {
            token:Mytoken,
            type:1
        },
        success : function(data){
            if(data.code == 0){
                $("#content").empty();
                $.each(data.data,function(i,date){
                    x = i+1;
                    var imgId = "img-"+i;
                    var imgInputId = "imgInput-"+i;
                    var titleId = "title-"+i;
                    var urlId = "url-"+i;
                    var priorityId = "priority-" + i;
                    var id = 'id-'+i;
                    var iconId = 'imgurl-'+i;
                    var icon = imgUrl + date.icon;
                    document.getElementById("content").innerHTML = document.getElementById("content").innerHTML +
                        '<div class="divContent">'+
                        '<span class="hidden" id="'+id+'">'+date.id+'</span>'+
                        '<span id='+iconId+' class="hidden">'+date.icon+'</span>'+
                        '<div class="divList">'+
                        '<img src="'+icon+'" class="img" id="'+imgId+'" onclick=imageClick("'+imgInputId+'")>'+
                        '<input type="file" class="hidden" id="'+imgInputId+'" onchange=changeimage(this,"image")>'+
                        '</div>'+
                        '<div style="margin-top: 10px">'+
                        '<div class="col-sm-2 control-label" style="padding-top: 4px">标题</div>'+
                        '<div class="col-sm-10">'+
                        '<input type="text" placeholder="标题" class="inputText" value="'+date.title+'" id="'+titleId+'">'+
                        '</div>'+
                        '</div>'+
                        '<div style="margin-top: 50px">'+
                        '<div class="col-sm-2 control-label" style="padding-top: 4px">链接</div>'+
                        '<div class="col-sm-10">'+
                        '<input type="text" placeholder="链接" class="inputText" value="'+date.url+'" id="'+urlId+'">'+
                        '</div>'+
                        '</div>'+
                        '<div style="margin-top: 90px">'+
                        '<div class="col-sm-2 control-label" style="padding-top: 4px">排序</div>'+
                        '<div class="col-sm-10">'+
                        '<input type="number" class="inputText" value="'+date.priority+'" id="'+priorityId+'">'+
                        '</div>'+
                        '</div>'+
                        '<div>'+
                        '<div class="col-sm-12">'+
                        '<a class="btn btn-primary button" onclick="saveLink('+i+')">'+
                        '<i class="fa fa-save"></i>'+
                        '&nbsp;保存'+
                        '</a>'+
                        '<a class="btn btn-danger button" onclick="delLink('+i+')">'+
                        '<i class="fa fa-trash-o"></i>'+
                        '&nbsp;删除'+
                        '</a>'+
                        '</div>'+
                        '</div>'+
                        '</div>'
                });
            }else if(data.code == 401){
                location.href = "index.html"
            }else{
                modalinfo(data.msg);
            }
        }
    });

    //确认删除
    $("#del_confirm").click(function(){
        var id = document.getElementById("del_id").innerHTML;
        $.ajax({
            url : urladdr + "/web/link/delete",
            method : "POST",
            data : {
                token:Mytoken,
                id:id
            },
            success : function(data){
                if(data.code == 0){
                    modalinfo("删除成功");
                    modalclose("#deletemodal");
                    queryLink();
                }else if(data.code == 401){
                    location.href = "index.html"
                }else{
                    modalinfo(data.msg);
                }
            }
        });
    });
}

function uploadImg(id,imgId){
    var formData = new FormData();
    formData.append('image', $("#" + id)[0].files[0]);
    formData.append('token', Mytoken);
    $.ajax({
        url: urladdr + "/web/uploadImage",
        method: "POST",
        data: formData,
        processData: false,
        contentType: false,
        success : function(data){
            if(data.code == 0){
                var url = imgUrl + "/" + data.data;
                document.getElementById(imgId).src = url;
            }else if(data.code == 401){
                location.href = "index.html"
            }else{
                modalinfo(data.msg);
            }
        }
    });
}

function saveLink(i){
    var imgId = "img-"+i;
    var titleId = "title-"+i;
    var urlId = "url-"+i;
    var priorityId = "priority-"+i;
    var id = 'id-'+i;
    var iconId = 'imgurl-'+i;
    var title = document.getElementById(titleId).value;
    var url = document.getElementById(urlId).value;
    var icon = document.getElementById(iconId).innerHTML;
    var linkId = document.getElementById(id).innerHTML;
    var priority = document.getElementById(priorityId).value;
    if(linkId==""){
        if(title==""){
            modalinfo("请输入标题");
        }else if(url == ""){
            modalinfo("请输入链接");
        }else if(icon=="images/link.png"){
            modalinfo("请上传图标");
        }else{
            var data={
                title:title,
                icon:icon,
                url:url,
                type:1,
                priority:priority
            };
            $.ajax({
                url : urladdr + "/web/link/save?token="+Mytoken,
                method : "POST",
                contentType:"application/json; charset=utf-8",
                data : JSON.stringify(data),
                success : function(data){
                    if(data.code == 0){
                        modalinfo("保存成功");
                        queryLink();
                    }else if(data.code == 401){
                        location.href = "index.html"
                    }else{
                        modalinfo(data.msg);
                    }
                }
            });
        }
    }else{
        if(title==""){
            modalinfo("请输入标题");
        }else if(url == ""){
            modalinfo("请输入链接");
        }else if(icon=="images/link.png"){
            modalinfo("请上传图标");
        }else{
            data={
                title:title,
                icon:icon,
                url:url,
                type:1,
                id:linkId,
                priority:priority
            };
            $.ajax({
                url : urladdr + "/web/link/update?token="+Mytoken,
                method : "POST",
                contentType:"application/json; charset=utf-8",
                data : JSON.stringify(data),
                success : function(data){
                    if(data.code == 0){
                        modalinfo("保存成功");
                        queryLink();
                    }else if(data.code == 401){
                        location.href = "index.html"
                    }else{
                        modalinfo(data.msg);
                    }
                }
            });
        }
    }
}

function delLink(i){
    showmodal("#deletemodal");
    var id = 'id-'+i;
    document.getElementById("del_id").innerHTML = document.getElementById(id).innerHTML;
}


function uplodbase64() {
    var $image = $('#image');
    var $result = $('#result');

    var croppedCanvas;
    var roundedCanvas;

    if (!croppable) {
        return;
    }

    // Crop
    croppedCanvas = $image.cropper('getCroppedCanvas');
    // Round
    roundedCanvas = getRoundedCanvas(croppedCanvas);

    // Show
    $result.html('<img src="' + roundedCanvas.toDataURL() + '">');
    var x = roundedCanvas.toDataURL();
    modalclose("#imagemodal");
    showmodal("#progressmodal");
    setTimeout(function () {
        var base64 = x;
        base64 = base64.split(",");
        var imageData = new FormData();
        imageData.append('base64', base64[1]);
        imageData.append('token', Mytoken);
        $.ajax({
            url: urladdr+"/web/uploadBase64Image?token="+Mytoken,
            method: "POST",
            data: imageData,
            processData: false,
            contentType: false,
            ////这里我们先拿到jQuery产生的 XMLHttpRequest对象，为其增加 progress 事件绑定，然后再返回交给ajax使用
            xhr: function () {
                var xhr = $.ajaxSettings.xhr();
                if (onprogress && xhr.upload) {
                    xhr.upload.addEventListener("progress", onprogress, false);
                    return xhr;
                }
            },
            success: function (data) {
                if (data.code == 0) {
                    var imageUrl = data.data;
                    var id = document.getElementById("imgId").innerHTML;
                    var imgId = "img-"+id;
                    var iconId = "imgurl-"+id;
                    document.getElementById(imgId).src = imgUrl+imageUrl;
                    document.getElementById(iconId).innerHTML = imageUrl;
                    setTimeout(function(){
                        modalclose("#progressmodal");
                    },1000)
                }else{
                    modalclose("#imagemodal");
                    modalinfo(data.msg);
                }
            }
        })
    }, 1000);
}


